<template>
    <div class="likes-management-container">
      <el-card class="likes-card">
        <div class="card-header">
          <h2 class="card-title">点赞记录</h2>
        </div>
        
        <div class="toolbar">
          <div class="search-and-filter">
            <el-input
              v-model="searchQuery"
              placeholder="搜索点赞内容"
              clearable
              class="search-input"
              @change="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
  
        <div class="table-container">
          <el-table 
            :data="likes" 
            style="width: 100%" 
            v-loading="loading"
            border
            stripe
            highlight-current-row
          >
            <el-table-column label="点赞用户" width="180" align="center">
              <template #default="scope">
                <div class="user-info">
                  <el-tag effect="plain" class="user-tag">{{ scope.row.user_name }}</el-tag>
                </div>
              </template>
            </el-table-column>
            
            <el-table-column prop="post_title" label="点赞文章" min-width="300" show-overflow-tooltip>
              <template #default="scope">
                <div class="like-content">
                  <el-tag type="info" size="small" class="content-type-tag">{{ scope.row.content_type === 'post' ? '帖子' : '评论' }}</el-tag>
                  {{ scope.row.post_title || scope.row.comment_content || '内容已删除' }}
                </div>
              </template>
            </el-table-column>
            
            <el-table-column label="点赞时间" width="180" align="center">
              <template #default="scope">
                <div class="time-info">
                  <el-icon><Calendar /></el-icon>
                  {{ $formatDateTime(scope.row.created_at) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
  
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            background
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import nework from '../../api/index'
  
  const { communityApi, request } = nework
  
  const likes = ref([])
  const searchQuery = ref('')
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  
  // 存储当前的搜索参数
  const searchParams = reactive({
    search: ''
  })
  // 获取点赞记录
  const getLikes = async (extraParams = {}) => {
    try {
      loading.value = true
      const params = {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        search: searchParams.search,
        ...extraParams
      }
      
      const { data } = await request(communityApi.getAllLikes, params, 'POST')
      likes.value = data.data
      total.value = data.pagination.total
    } catch (error) {
      ElMessage.error('获取点赞记录失败，请稍后重试')
      console.error('获取点赞记录错误:', error)
    } finally {
      loading.value = false
    }
  }

  // 处理搜索
  const handleSearch = () => {
    // 更新搜索参数
    searchParams.search = searchQuery.value
    // 重置到第一页
    currentPage.value = 1
    // 获取数据
    getLikes()
  }
  
  // 处理分页
  const handleSizeChange = (size) => {
    pageSize.value = size
    getLikes()
  }
  
  const handlePageChange = (page) => {
    currentPage.value = page
    getLikes()
  }
  
  onMounted(() => {
    getLikes()
  })
  </script>
  
  <style scoped lang="scss">
  // 主题颜色
  $primary-color: #409eff;
  $primary-light: #ecf5ff;
  $success-color: #67c23a;
  $warning-color: #e6a23c;
  $danger-color: #f56c6c;
  $info-color: #909399;
  $background-color: #f5f7fa;
  $text-color: #303133;
  $text-secondary: #606266;
  $text-light: #909399;
  $border-color: #dcdfe6;
  
  .likes-management-container {
    display: flex;
    justify-content: center;
  }
  
  .likes-card {
    width: 100%;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  
    .card-header {
      margin-bottom: 20px;
      
      .card-title {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        color: $text-color;
        position: relative;
        padding-left: 12px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background: linear-gradient(to bottom, $primary-color, lighten($primary-color, 10%));
          border-radius: 2px;
        }
      }
    }
  
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
  
      .search-and-filter {
        display: flex;
        gap: 16px;
      }
  
      .search-input {
        width: 300px;
      }
    }
  
    .table-container {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
  
    .pagination {
      margin-top: 24px;
      display: flex;
      justify-content: center;
    }
  }
  
  .like-content {
    line-height: 1.5;
    color: $text-color;
    font-size: 14px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  
    .content-type-tag {
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }
  }
  
  .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  
    .user-avatar {
      border: 2px solid #eaeaea;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  
    .user-tag {
      font-size: 13px;
      padding: 4px 8px;
      background-color: $primary-light;
      color: $primary-color;
      border-color: transparent;
    }
  }
  
  .time-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: $text-secondary;
    font-size: 13px;
  }
  
  .status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
  
    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
  
      &.active {
        background-color: $success-color;
        box-shadow: 0 0 0 2px rgba($success-color, 0.2);
      }
  
      &.inactive {
        background-color: $info-color;
        box-shadow: 0 0 0 2px rgba($info-color, 0.2);
      }
    }
  }
  
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
  
    .el-table__header-wrapper {
      th {
        background-color: #f5f7fa;
        font-weight: 600;
        color: $text-color;
      }
    }
  
    .el-table__row {
      td {
        padding: 12px 0;
      }
    }
  }
  
  :deep(.el-table__header) {
    background-color: #f5f7fa;
  }
  
  :deep(.el-table__row) {
    transition: all 0.3s ease;
  
    &:hover {
      background-color: rgba($primary-color, 0.05);
    }
  }
  
  :deep(.el-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  @media (max-width: 768px) {
    .likes-card {
      padding: 16px;
  
      .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
  
        .search-and-filter {
          flex-direction: column;
        }
  
        .search-input {
          width: 100%;
        }
      }
  
      .table-container {
        overflow-x: auto;
      }
    }
  }
  </style>
  